import React, { memo, Component } from 'react'
import { getMyList,getMyEnterList } from '@/api/user'
import { Spin  } from 'antd'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import {getDateDiff} from '../../utils/tool'

const BaseUrl = baseUrl()
class searchMessage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      myThingList:[], //我发布的
      myEnterList:[], //我参与的
    }
  }
  componentDidMount() {
    getMyList().then(res=>{
      this.setState({
        myThingList:res.data?.data
      })
    })
    getMyEnterList().then(res=>{
      this.setState({
        myEnterList:res.data?.data
      })
    })
  }
  goToDetail(id){
    this.props.goDetail(`/home/schoolIndex/thingLostDetail?numberId=${id}&connectMine=true`)
  }
  render() {
    const { myThingList,myEnterList } = this.state
    return (
      <Spin spinning={this.state.loading} size="large">
        <div style={{height:'90vh',padding:'3vh 0 5vh 0'}} className='flex'>
          <div className='mine-all-1'>
            <div className='box-all-title'>我发布的</div>
            <div className='flex' style={{flexWrap:'wrap',overflowY:'scroll',maxHeight:'60vh'}}>
            {
                myThingList.map((item, index) => {
                        return (
                          <div className='thingBox' onClick={this.goToDetail.bind(this,item.numberId)}>
                            <div className='lostImg' style={{
                              background: `url(${BaseUrl}${item.thingImg.split('&')[0]}) no-repeat`,
                              backgroundSize: '100% 100%'
                            }} />
                            <div className='messAll-Box'>
                                <div style={{ color: 'red', fontWeight: 600, fontSize: 14 }}>
                                    {item.tag}
                                    <div style={{textAlign:'right',color:'#fce72a',fontSize:6}}>{getDateDiff(item.createTime)}</div>
                                </div>
                                <div className='contentDet'>{item.content}</div>
                            </div>
                        </div>
                    )
                })
            }
            </div>
          </div>
          <div className='mine-all-1' style={{marginLeft:'2vw'}}>
            <div className='box-all-title'>我参与的</div>
            <div className='flex' style={{flexWrap:'wrap',overflowY:'scroll',maxHeight:'60vh'}}>
            {
                myEnterList.map((item, index) => {
                        return (
                          <div className='thingBox' onClick={this.goToDetail.bind(this,item.numberId)}>
                            <div className='lostImg' style={{
                              background: `url(${BaseUrl}${item.thingImg.split('&')[0]}) no-repeat`,
                              backgroundSize: '100% 100%'
                            }} />
                            <div className='messAll-Box'>
                                <div style={{ color: 'red', fontWeight: 600, fontSize: 14 }}>
                                    {item.tag}
                                    <div style={{textAlign:'right',color:'#fce72a',fontSize:6}}>{getDateDiff(item.firstTime)}</div>
                                </div>
                                <div className='contentDet'>{item.content}</div>
                            </div>
                        </div>
                    )
                })
            }
            </div>
          </div>
        </div>
      </Spin>
    )
  }
}
export default memo(searchMessage)